<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- 公共样式 -->
    <link rel="stylesheet" href="./css/conment.css">
    <link rel="stylesheet" href="./fonts/css/font-awesome.css">
    <!-- 引入主页 -->
    <link rel="stylesheet" href="./css/index.css">
    <!-- 引入头部和底部 -->
    <link rel="stylesheet" href="./css/public.css">

    <title>Document</title>
</head>

<body>
    <!-- 头部 -->
    <header>
        <div class="header-one">
            <span><img src="./images/header_logo.png" alt=""></span>
            <span class="clearfix"><a href="javascript:;"><img src="./images/header_app.png" alt=""></i></a></span>
        </div>
        <div>
            <div><input type="text" placeholder="买买买"></div>
            <div><span>搜索</span></div>
        </div>
    </header>
    <!-- 用于撑开头部 -->
    <div class="tmp"></div>
    <!-- 内容部分 -->
    <div class="view">
        <div class="nav">
            <ul>
            </ul>
        </div>
        <!-- 超值折扣推荐 -->
        <div class="pd">
            <div class="pd-top">
                <span>超值折推荐</span>
                <span><i class="fa fa-chevron-circle-right" aria-hidden="true"></i></span>
            </div>
            <!-- 渲染 -->
            <div class="pd-main">
            </div>
        </div>
        <!-- 更多优惠信息 -->
        <div class="more">
            <a href="./pages/moneyctrl.html">更多优惠信息>></a>
        </div>
    </div>
    <!-- 用于撑开头部 -->
    <div class="tmp"></div>
    <!-- 底部代码 -->
    <footer>
        <div>
            <span>品牌排行</span>
            <span><i class="fa fa-chevron-circle-right" aria-hidden="true"></i></span>
        </div>
        <div>
            <span>登陆</span>
            <span>注册</span>
            <span id="footer-stick"><i class="fa fa-arrow-up" aria-hidden="true"></i>返回顶部</span>
        </div>
        <div>
            <span>手机APP下载</span>
            <span>慢慢卖手机版</span>
            <span>--掌上比价平台</span>
            <span>m.manmanbuy.com</span>
        </div>
    </footer>
</body>
<script src="./lib/jquery/jquery.js"></script>
<script src="./js/base.js"></script>
<script src="./lib/zepto/zepto.js"></script>
<script src="./lib/zepto/event.js"></script>
<script src="./js/index.js"></script>
<script src="./lib/template/template.js"></script>
<script src="./js/animate.js"></script>

</html>
<!-- 渲染1 -->
<script type="text/template" id="navtemp">
    {{each result as val key}} {{if key > 7}}
    <li style="display:none">
        <a href="./pages/{{val.titlehref}}" data-id="{{val.indexmenuId}}"> {{val.img}} <p>{{val.name}}</p></a>
    </li>
    {{else if key
    < 7}} <li>
    <a href="./pages/{{val.titlehref}}" data-id="{{val.indexmenuId}}"> {{val.img}}<p>{{val.name}}</p></a>
        </li>
{{else if key ==7}}
<li>
    <a href="javascript:;" data-id="{{val.indexmenuId}}"> {{val.img}}<p>{{val.name}}</p></a>
</li>
{{/if}} {{/each }}
        </script>

<!-- 渲染2 -->
<script type="text/template" id="pdTemp">
    {{each result as val key }}
    <div class="main-photo">{{val.productImgSm}}</div>
    <div class="main-font">
        <p>{{val.productName}}<span>{{val.productPinkage}}</span></p>
        <div class="font-bottom">
            <span>京东商城|{{val.productTime}}</span>
            <span><i class="fa fa-commenting-o" aria-hidden="true"></i>{{val.productComCount}}</span>
        </div>
    </div>
    {{/each}}
</script>

<script>
    render();

    function render() {
        $.ajax({
            type: "get",
            url: "http://193.112.55.79:9090/api/getindexmenu",
            dataType: 'json',
            success: function (res) {
                // console.log(res);
                template.config("escape", false);
                var htmlStr = template("navtemp", res);
                $("ul").html(htmlStr);
                // 在这里获取li
                var nth7 = document.querySelector(".nav>ul").children;
                // console.log(nth7);
                for (var i = 0; i < nth7.length; i++) {
                    nth7[i].index = i;
                    console.log(nth7[i].index);
                    flag = true
                    if (nth7[i].index == 7) {
                        nth7[i].onclick = function () {
                            flag = !flag;
                            // 这里写的是移除li里面的样式
                            if (!flag) {
                                nth7[8].style.display = "block";
                                nth7[9].style.display = "block";
                                nth7[10].style.display = "block";
                                nth7[11].style.display = "block";
                            } else {
                                nth7[8].style.display = "none";
                                nth7[9].style.display = "none";
                                nth7[10].style.display = "none";
                                nth7[11].style.display = "none";
                            }
                        }
                    }
                }
            }




        })

    }
</script>
<!-- 超值推荐 -->
<script>
    render2();

    function render2() {
        $.ajax({
            type: 'get',
            url: 'http://193.112.55.79:9090/api/getmoneyctrl',
            dataType: 'json',
            success: function (res) {
                // console.log(res);
                template.config("escape", false);
                var htmlStr = template("pdTemp", res);
                $(".pd-main").html(htmlStr);
            }
        })
    }
</script>


<script>
    // var nth7 = document.querySelector(".nav>ul").children;
    // console.log($('.nav>ul').children())
    // for (var i = 0; i < nth7.length; i++) {
    //     console.log(index);
    // }
</script>